import { ExtractPropTypes } from 'vue'
import { validatorColorValue, validatorSizeValue } from '../../utils'
import { ZIndex } from '../../config'
import { UPDATE_MODEL_EVENT } from '../../constants'

/**
 * popup弹出方向有效值
 */
const PopupModes = ['left', 'right', 'top', 'bottom', 'center'] as const
export type PopupMode = typeof PopupModes[number]

/**
 * popup关闭按钮位置有效值
 */
const PopupCloseBtnPositions = ['topLeft', 'topRight', 'bottomLeft', 'bottomRight'] as const
export type PopupCloseBtnPosition = typeof PopupCloseBtnPositions[number]

/**
 * props参数
 */
export const popupProps = {
  /** modelValue */
  modelValue: {
    type: Boolean,
    default: false
  },
  /** 弹出方向 */
  mode: {
    type: String,
    default: 'left',
    validator: (value: PopupMode) => {
      return PopupModes.includes(value)
    }
  },
  /** 背景颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  bgColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('bg', value)
    }
  },
  /**
   * 弹框宽度, 单位rpx
   * 对左、右、中弹框生效
   */
  width: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /**
   * 弹框高度, 单位rpx
   * 对上、下、中弹框生效
   */
  height: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 显示遮罩 */
  mask: {
    type: Boolean,
    default: true
  },
  /** 透明遮罩 */
  transparentMask: {
    type: Boolean,
    default: false
  },
  /** 点击遮罩可以关闭 */
  maskCloseable: {
    type: Boolean,
    default: true
  },
  /** 关闭按钮图标, 如果为空则不进行设置 */
  closeIcon: {
    type: String,
    default: 'close'
  },
  /** 关闭按钮显示的位置 */
  closeIconPosition: {
    type: String,
    default: 'topRight',
    validator: (value: PopupCloseBtnPosition) => {
      return PopupCloseBtnPositions.includes(value)
    }
  },
  /** 关闭图标大小, 单位rpx */
  closeIconSize: {
    type: [String, Number],
    default: '',
    validator: (value: string | number) => {
      return validatorSizeValue(value)
    }
  },
  /** 关闭图标颜色, 支持内置颜色的值、十六进制、rgb()、rgba()的值 */
  closeIconColor: {
    type: String,
    default: '',
    validator: (value: string) => {
      return validatorColorValue('color', value)
    }
  },
  /** 是否开启底部安全区适配，开启的话，会在iPhoneX机型底部添加一定的内边距 */
  safeAreaInsetBottom: {
    type: Boolean,
    default: true
  },
  /** zIndex */
  zIndex: {
    type: [String, Number],
    default: ZIndex.popup
  },
  /** 自定义样式 */
  customStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 内容区域自定义样式 */
  contentCustomStyle: {
    type: Object,
    default: () => {
      return {}
    }
  },
  /** 内部参数, 标记是否内部使用popup弹框(false为内部使用) */
  popup: {
    type: Boolean,
    default: true
  }
}
export type PopupProps = ExtractPropTypes<typeof popupProps>

export const popupEmits = {
  [UPDATE_MODEL_EVENT]: (value: boolean) => typeof value === 'boolean',
  /** 打开事件 */
  open: () => true,
  /** 关闭事件 */
  close: () => true
}
export type PopupEmits = typeof popupEmits
